<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title class="title">文件预览存储平台-请输入项目访问密码</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link
            rel="stylesheet"
            type="text/css"
            href="https://www.layuicdn.com/layui/css/layui.css"
    />
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica,
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol";
        font-variant: tabular-nums;
        line-height: 1.5;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background-color: #eee;
        position: relative;
    }

    .loginForm .layui-panel {
        border-radius: 20px;
        position: relative;
    }

    .loginForm .title {
        display: block;
        font-size: 30px;
        padding: 40px 50px;
        text-align: center;
    }

    #msg {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        color: red;
    }

    .copyRight {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translate(-50%, 0);
        color: rgba(0, 0, 0, 0.65);
    }
</style>
<body>
<div class="loginForm">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-panel">
                <span id="msg"></span>

                <span class="title">文件预览存储平台</span>

                <div style="padding: 0px 30px 140px">
                    <form class="layui-form" action="" style="text-align: center">
                        <input type="hidden" th:value="${uri}" name="uri"/>
                        <div class="layui-form-item" style="display: flex; justify-content: center">
                            <div
                                    class="layui-input-inline"
                                    style="width: 250px;"
                            >
                                <input
                                        type="password"
                                        name="password"
                                        required
                                        lay-verify="required"
                                        placeholder="请输入访问密码"
                                        autocomplete="off"
                                        class="layui-input"
                                />
                            </div>
                        </div>
                        <div>
                            <div class="layui-input-inline">
                                <button
                                        class="layui-btn #5FB878"
                                        lay-submit
                                        style="width: 150px; margin-top: 20px"
                                        lay-filter="login"
                                >
                                    访问
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<span class="copyRight">©2021-2022  WebPrototype Project,  All Rights Reserved.</span>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["layer", "element", "jquery", "form"], function () {
        var layer = layui.layer,
            element = layui.element,
            form = layui.form,
            $ = layui.jquery;

        //init
        $.get("/initSite", function (result) {
            $(".title").html(result.data.siteName);
        });

        //登录操作
        form.on("submit(login)", function (data) {
            $.post("/view/viewLogin", data.field, function (result) {
                if (result.code == 200) {
                    $("#msg").text("登录成功,请等待正在跳转中！");
                    location.href = result.data;
                } else {
                    layer.msg(result.msg);
                    $("#msg").text(result.msg);
                }
            });
            return false;
        });
    });
</script>
</html>
